<template>
  <div>
    <ul>
      <li v-for="(item, index) of goodsList" :key="index">
        <Goods v-bind="item" :add="add" :lessen="lessen" />
      </li>
      <p>当前购物车一共含有{{ aggregately }}件物品</p>
    </ul>
  </div>
</template>

<script>
import Goods from '../../components/Goods.vue'
import { nanoid } from 'nanoid'
export default {
  name: 'ShowCar',
  data() {
    return {
      goodsList: [
        {
          id: nanoid(),
          goodsName: 'airports2',
          money: 1998,
          attribute: '',
          todo: 1,
        },
        {
          id: nanoid(),
          goodsName: 'HuaweiWacth2',
          money: 258,
          attribute: 'LoveHome',
          todo: 5,
        },
        {
          id: nanoid(),
          goodsName: 'lenve think Pad',
          money: 9985,
          attribute: 'LikeAmerica',
          todo: 1,
        },
      ],
    }
  },
  methods: {
    add(todo) {
      this.goodsList.forEach((element) => {
        if (element.id === todo) {
          element.todo++
        }
      })
    },
    lessen(todo) {
      this.goodsList.forEach((element) => {
        if (element.id === todo) {
          element.todo--
        }
      })
    },
  },
  components: {
    Goods,
  },
  computed: {
    aggregately() {
      return this.goodsList.reduce((p, c) => p + c.todo, 0)
    },
  },
}
</script>

<style></style>
